<template>
  <div class="home w-full p-3 h-full min-h-50">
    <div class="mb-2">
      <img
      class="w-full rounded-xl"
        :src="banner_url"
        alt="banner"
      />
    </div>

    <div class="grid grid-cols-4 gap-x-2 gap-y-6 rounded-lg py-4 rounded-lg bg-white mt-3">
        <div
        class="app flex items-center justify-center flex-col"
        v-for="(item, index) in IWebsiteApps"
        :key="item.id"
        @click="toPage(item)">
            <div v-if="item.appIconUrl" class="w-12 h-12 rounded-lg overflow-hidden">
                <img class="w-full h-full rounded-lg" :src="item.appIconUrl" alt="图标">
            </div>
            <div v-else class="w-12 h-12 rounded-lg overflow-hidden flex justify-center items-center" :style="{backgroundColor: item.appIconBg}">
                  <Icon :icon="item.appIcon" class="text-3xl align-middle" :style="{color: item.appIconColor}"/>
            </div>
            <div class="mt-2 text-sm text-dark-300">{{ item.appName }}</div>
        </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import * as owAppApi from "@/api/official-website/app";
import { Icon } from "@iconify/vue";
const router = useRouter()
const banner_url = ref<string>("https://img.tukuppt.com/ad_preview/00/03/66/5c98adf2c28c8.jpg!/fw/980")
const IWebsiteApps = ref([]);

owAppApi.listBindApp().then((res) => {
  console.log(res.data);
  IWebsiteApps.value = res.data;
  console.log('111', IWebsiteApps.value);
});

// 跳转路由
const toPage = (item) => {
  if(/^http/.test(item.appUrl)) {
    window.location.href = item.appUrl
  } else {
    router.push({ path: item.appUrl });
  }
};

</script>
